<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="../js/babel.js"></script>
</head>

<body>
  <div id="root"></div>
</body>

</html>

<script type="text/babel">

  // input 输入框
  class NameForm extends React.Component {
    constructor(props) {
      super(props)
      this.state = { value: '' }
    }

    handleChange(event) {
      console.log(111, event);
      this.setState({
        value: event.target.value
      })
    }

    handleSubmit(event) {
      console.log(222, event);
      alert('提交的名字' + this.state.value)
      event.preventDefault()
    }

    render() {
      return (
        <form onSubmit={(e) => this.handleSubmit(e)}>
          <label>
            名字：
            <input type="text" value={this.state.value} onChange={(e) => this.handleChange(e)} />
          </label>
          <input type="submit" value='提交' />
        </form>
      )
    }
  }

  // select 选择框
  class SelectForm extends React.Component {
    constructor(props) {
      super(props)
      this.state = { value: ['xilanhua'] }
    }

    handleChange(e) {
      console.log(22, e.target.value);
      // this.setState({
      //   value: e.target.value
      // }, () => {
      //   console.log(111, this.state.value);
      // })
      let value = this.state.value

      if (value.indexOf(e.target.value) == -1) {
        value.push(e.target.value)
        this.setState({
          value: value
        })
      } else {
        this.setState({
          value: value.filter(item => item != e.target.value)
        })
      }

    }

    handleSubmit(e) {
      alert('提交的蔬菜' + this.state.value)
      e.preventDefault()
    }

    render() {
      return (
        <form onSubmit={(e) => this.handleSubmit(e)} >
          <label>
            选择：
            <select multiple value={this.state.value} onChange={(e) => this.handleChange(e)}>
              <option value='xilanhua'>西蓝花</option>
              <option value='egg'>鸡蛋</option>
              <option value='huanggua'>黄瓜</option>
              <option value='qiezi'>茄子</option>
            </select>
          </label>
        </form>
      )
    }
  }

  /**
   * 表单 input、textarea、select 他们都接收一个value 属性 你可以通过这个value 实现受控组件
   * 注意：你可以将数组传入value 以支持在select 中选择多个标签
   */


  // 处理多个输入 当需要处理多个input 时 我们可以给每个元素添加name 属性 并让处理函数根据event.target.name 的值选择要执行的操作
  class MultipleInput extends React.Component {
    constructor(props) {
      super()
      this.state = {
        isGoing: false,
        numberOfGuests: 0
      }
    }

    handleChange(event) {
      const value = event.target.type === 'checkbox' ? event.target.checked : event.target.value  // 这里根据表单的类型取到你的表单值
      const name = event.target.name  // es6 计算属性名称  确定要给哪个表单赋值
      this.setState({
        [name]: value
      }, () => {
        console.log(111, this.state);
      })
    }

    render() {
      return (
        <form>
          <label>
            参与:
            <input name='isGoing' type="checkbox" checked={this.state.isGoing} onChange={(e) => this.handleChange(e)} />
          </label>
          <label>
            来宾人数:
            <input name='numberOfGuests' type="text" value={this.state.numberOfGuests} onChange={(e) => this.handleChange(e)} />
          </label>
        </form>
      )
    }
  }

  ReactDOM.render(<MultipleInput />, document.getElementById('root'))

</script>